<template>
	<view class="familypage">
		
		<view class="list">
			<view class="itemlist">
				<view class="left">
					<view class="imgbox">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
					</view>
					<view class="infobox">
						<view class="nameline">
							<view class="name">
								爸爸
							</view>
							<view class="age">
								男·67岁
							</view>
						</view>
						<view class="desline">
							<view class="itemdes">
								症状1
							</view>
						</view>
					</view>
				</view>
				<view class="rightbtn">
					修改
				</view>
			</view>
		</view>
		
		
		<view class= "tabbox">
			<view class="itemtab" @click="shanchu">
				<view class="iconfont icon-shanchu">
					
				</view>
				<view class="item">
					删除
				</view>
			</view>
			<view class="itemtab">
				<view class="iconfont icon-tianjia">
					
				</view>
				<view class="item">
					添加
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
 .familypage{
	 width: 750rpx;
	 box-sizing: border-box;
	 background-color: whitesmoke;
	 
	 .list{
		  width: 100%;
		 .itemlist{
			 width: 100%;
			 background-color: white;
			 box-sizing: border-box;
			 padding: 20rpx;
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 .left{
				 width: 70%;
				 display: flex;
				 align-items: center;
				 .imgbox{
					 width: 80rpx;
					 height: 80rpx;
					 border-radius: 50%;
					 margin-right: 20rpx;
					 image{
						 width: 100%;
						 height: 100%;
						 border-radius: 50%;
					 }
				 }
				 .infobox{
					 line-height: 2.2;
					 .nameline{
						 display: flex;
						 align-items: center;
						 .name{
							font-weight: bold; 
						 }
						 .age{
							 font-size: 28rpx;
							 color: gray;
							 margin-left: 20rpx;
						 }
					 }
					 .desline{
						 width: 100%;
						 display: flex;
						 align-items: center;
						 .itemdes{
							 font-size: 24rpx;
							 text-align: center;
							 line-height: 50rpx;
							 height: 50rpx;
							 padding: 0 20rpx;
							 background-color: #cccccc;
							 border-radius: 8rpx;
							 margin-right: 20rpx;
						 }
					 }
				 }
				
				 
			 }
			 .rightbtn{
			 					 width: 100rpx;
			 					 font-size: 30rpx;
			 					 height: 50rpx;
			 					 border-radius: 25rpx;
			 					 line-height: 50rpx;
			 					 text-align: center;
			 					 border: 1rpx solid #1a4f8a;
			 					 color: #1a4f8a;
			 }
		 }
	 }
	 
	 
	 .tabbox{
	 		   width: 750rpx;
	 		   height: 160rpx;
	 		   background-color: white;
	 		   justify-content: space-evenly;
	 		   position: fixed;
	 		   left: 0;
	 		   bottom: 0;
	 		   box-sizing: border-box;
	 		   padding: 10rpx 30rpx;
	 		   display: flex;
	 		   align-items: center;
	 		   text-align: center;
	 		   .itemtab{
	 			   color:#B1B1B1 ;
	 			   font-size: 30rpx;
	 			   .iconfont{
	 				   font-size: 40rpx;
	 				   margin-bottom: 10rpx;
	 			   }
	 			   
	 		   }
	 		   
	 		   
	 }
 }
</style>
